<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas遥控器</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        margin: 0;
        font-family: Arial, sans-serif;
      }
      canvas {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        border-radius: 20px;
      }
      .display {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #222;
        color: #0f0;
        padding: 10px 20px;
        border-radius: 5px;
        font-family: monospace;
        opacity: 0;
        transition: opacity 0.3s;
      }
    </style>
  </head>
  <body>
    <div class="display" id="display">按钮按下</div>
    <canvas id="remoteCanvas" width="300" height="500"></canvas>

    <script>
      const canvas = document.getElementById('remoteCanvas')
      const ctx = canvas.getContext('2d')
      const display = document.getElementById('display')

      // 遥控器状态
      const remote = {
        power: false,
        volume: 50,
        channel: 1,
        pressedButton: null,
        lastPressTime: 0
      }

      // 按钮定义
      const buttons = [
        { id: 'power', x: 100, y: 80, width: 100, height: 40, label: '电源', radius: 10 },
        { id: 'volUp', x: 200, y: 180, width: 60, height: 60, label: '+', radius: 30 },
        { id: 'volDown', x: 40, y: 180, width: 60, height: 60, label: '-', radius: 30 },
        { id: 'chUp', x: 200, y: 280, width: 60, height: 60, label: '▲', radius: 30 },
        { id: 'chDown', x: 40, y: 280, width: 60, height: 60, label: '▼', radius: 30 },
        { id: 'ok', x: 120, y: 280, width: 60, height: 60, label: 'OK', radius: 30 },
        { id: 'num1', x: 40, y: 380, width: 60, height: 40, label: '1', radius: 5 },
        { id: 'num2', x: 120, y: 380, width: 60, height: 40, label: '2', radius: 5 },
        { id: 'num3', x: 200, y: 380, width: 60, height: 40, label: '3', radius: 5 }
      ]

      // 绘制遥控器
      function drawRemote() {
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        // 绘制遥控器背景
        ctx.fillStyle = '#333'
        ctx.beginPath()
        ctx.roundRect(10, 10, canvas.width - 20, canvas.height - 20, 20)
        ctx.fill()

        // 绘制显示屏
        ctx.fillStyle = '#111'
        ctx.beginPath()
        ctx.roundRect(50, 30, 200, 40, 5)
        ctx.fill()

        // 显示状态
        ctx.fillStyle = remote.power ? '#0f0' : '#f00'
        ctx.font = '16px Arial'
        ctx.textAlign = 'center'
        ctx.fillText(remote.power ? `频道: ${remote.channel} 音量: ${remote.volume}` : '待机', 150, 55)

        // 绘制所有按钮
        buttons.forEach(button => {
          const isPressed = remote.pressedButton === button.id

          // 按钮背景
          ctx.fillStyle = isPressed ? '#555' : '#444'
          ctx.beginPath()
          ctx.roundRect(button.x, button.y, button.width, button.height, button.radius)
          ctx.fill()

          // 按钮边框
          ctx.strokeStyle = isPressed ? '#888' : '#666'
          ctx.lineWidth = 2
          ctx.stroke()

          // 按钮文字
          ctx.fillStyle = '#fff'
          ctx.font = button.label.length > 2 ? '16px Arial' : '20px Arial'
          ctx.textAlign = 'center'
          ctx.textBaseline = 'middle'
          ctx.fillText(button.label, button.x + button.width / 2, button.y + button.height / 2)
        })

        // 绘制品牌标志
        ctx.fillStyle = '#888'
        ctx.font = '12px Arial'
        ctx.textAlign = 'center'
        ctx.fillText('智能遥控器', 150, canvas.height - 20)
      }

      // 处理按钮点击
      function handleButtonClick(x, y) {
        const now = Date.now()
        if (now - remote.lastPressTime < 200) return // 防抖

        for (const button of buttons) {
          if (x >= button.x && x <= button.x + button.width && y >= button.y && y <= button.y + button.height) {
            remote.pressedButton = button.id
            remote.lastPressTime = now

            // 显示按下反馈
            display.textContent = `按下: ${button.label}`
            display.style.opacity = 1
            setTimeout(() => {
              display.style.opacity = 0
            }, 500)

            // 更新遥控器状态
            switch (button.id) {
              case 'power':
                remote.power = !remote.power
                break
              case 'volUp':
                if (remote.volume < 100) remote.volume += 5
                break
              case 'volDown':
                if (remote.volume > 0) remote.volume -= 5
                break
              case 'chUp':
                remote.channel++
                break
              case 'chDown':
                if (remote.channel > 1) remote.channel--
                break
              case 'num1':
                remote.channel = 1
                break
              case 'num2':
                remote.channel = 2
                break
              case 'num3':
                remote.channel = 3
                break
            }

            // 重绘
            drawRemote()

            // 按钮释放效果
            setTimeout(() => {
              remote.pressedButton = null
              drawRemote()
            }, 200)

            break
          }
        }
      }

      // 事件监听
      canvas.addEventListener('mousedown', e => {
        const rect = canvas.getBoundingClientRect()
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top
        handleButtonClick(x, y)
      })

      // 触摸支持
      canvas.addEventListener('touchstart', e => {
        e.preventDefault()
        const rect = canvas.getBoundingClientRect()
        const x = e.touches[0].clientX - rect.left
        const y = e.touches[0].clientY - rect.top
        handleButtonClick(x, y)
      })

      // 初始绘制
      drawRemote()

      // 添加简单的动画效果 - 电源灯闪烁
      if (false) {
        // 设置为true启用演示模式
        setInterval(() => {
          remote.power = !remote.power
          drawRemote()
        }, 2000)
      }
    </script>
  </body>
</html>
